<template>
  <md-popup id="popup-container" v-model="value" position="bottom" :has-mask="true" prevent-scroll @hide="cancel">
    <md-popup-title-bar title="选择出发时间" ok-text="确认" cancel-text="取消" @confirm="confirm" @cancel="cancel"></md-popup-title-bar>
    <md-picker ref="picker" :data="pickerData" :cols="3" :default-index="pickerDefaultIndex" is-view is-cascade @initialed="onPickerInitialed"></md-picker>
  </md-popup>
</template>
<script>
/**
 * 此组件根据服务器返回的时间显示日期以及时间
 */
import { Popup, PopupTitleBar, Picker, Dialog } from 'mand-mobile';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import Loading from '@/components/loading';
var moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'time-selector',
  components: {
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Picker.name]: Picker
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    appendTo: {
      default: () => document.body
    }
  },
  data() {
    return {
      pickerData: [],
      pickerDefaultIndex: [0, 0, 0],
      step: 1,
      carFlag: '0'
    };
  },
  created() {
    for (var i in this.getappointmentData) {
      this.getappointmentData[i].text = this.getDay(i);
    }
    var arrone = [
      {
        text: '',
        value: ''
      }
    ];
    var obj = {
      children: arrone,
      text: '现在',
      value: ''
    };
    this.getappointmentData[0].children.unshift(obj);
    console.log(this.getappointmentData);
    this.pickerData.push(this.getappointmentData);
  },
  methods: {
    confirm() {
      this.value = false;
      let values = this.$refs.picker.getColumnValues();
      let day = values[0].text.substr(values[0].text.length - 2);
      let momstart = moment(values[2].value, 'x');
      let timeObject = {
        day: day,
        momstart: momstart
      };
      this.$emit('submit', timeObject);
    },
    cancel() {
      this.value = false;
    },
    onPickerInitialed() {
      this.$refs.picker.refresh();
    },
    getDay(day) {
      var today = new Date();
      var targetdaymilliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetdaymilliseconds);
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      if (day === '0') {
        return tMonth + '月' + tDate + '日' + '今天';
      } else if (day === '1') {
        return tMonth + '月' + tDate + '日' + '明天';
      } else if (day === '2') {
        return tMonth + '月' + tDate + '日' + '后天';
      }
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length === 1) {
        m = '0' + month;
      }
      return m;
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  },
  computed: {
    ...mapGetters(['getappointmentData'])
  }
};
</script>

<style lang="stylus">
#popup-container {
  .slider {
    width: 200vw;
    transform: translate3d(0, 0, 0);
    transition: transform 0.5s ease-in-out;

    .container {
      background-color: #fff;
      height: 432px;
      width: 100vw;
      float: left;
      font-size: 22px;

      .hint {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 88px;
        font-size: 22px;
        color: color-text-caption;

        .hint-icon {
          width: 26px;
          height: 24px;
        }

        .theme-str {
          color: theme-color;
        }
      }

      .flex-box {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 88px;

        .waiting-hint {
          display: -webkit-box;
          font-size: 22px;

          .hint-icon {
            width: 26px;
            height: 24px;
          }

          .hint-str {
            color: theme-color;
          }

          .waiting-hint {
            color: color-text-caption;
            max-width: 25em;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
